<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        .head{
            width: 100%;
            height: 2.666667rem;
            background-color: rgb(216, 83, 83);
            color: white;
            text-align: center;
            line-height: 2.666667rem;
        }
        
    </style>
</head>
<body>
    <div id="app">
        <myheader></myheader>
        <mycon :list='list'></mycon>
        <myfooter></myfooter>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script>
        var myheader={
            template:`<div class='head'>猫眼电影</div>`
        }
        var mycon={
            props:["list"],
            template:`<div>
                <ul>
                    <li v-for='item in list'><img :src="item.img" /></li>
                </ul>    
                </div>`
        }
        var myfooter={
            template:`<div>尾部</div>`
        }
        var app=new Vue({
            el:'#app',
            data:{
                list:[]
            },
            mounted(){
                
                axios.get('list.json').then(res=>{
                    console.log(res);
                    this.list=res.data.movieList
                }),
                this.list.forEach(item => {
                    item.img = item.img.replace("w.h", "64.90");
                })
               
            },
            components:{
                myheader,mycon,myfooter
            }
            
        })
    </script>

</body>
</html>